<template>
  <div>
    <form @submit.prevent="addItem">
      <div class="form-group">
        <label for="username">用户名</label>
        <input v-model="commentObj.username" type="text" class="form-control" id="username" placeholder="用户名">
      </div>
      <div class="form-group">
        <label for="content">评论内容</label>
        <textarea v-model="commentObj.content" class="form-control textarea" id="content" placeholder="评论内容"></textarea>
      </div>
      <button type="submit" class="btn btn-default btn-right">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      commentObj: {
        username: '',
        content: ''
      }
    }
  },
  methods: {
    addItem () {
      const username = this.commentObj.username.trim()
      const content = this.commentObj.content.trim()
      if (!username || !content) {
        alert('请输入内容再提交！')
        return
      }
      const comment = {
        username, content
      }
      this.$emit('addItem', comment)
    }
  }
}
</script>

<style>
.btn-right{
  float: right;
}
.textarea {
  height: 200px !important;
}
</style>
